<include file="Public/head"/>
<body class="no-skin">
<include file="Public/header"/>
<div class="main-container" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.check('main-container', 'fixed')
        } catch (e) {
        }
    </script>
    <style>
        .modal-body{max-height: 700px; overflow-y: auto}
    </style>
    <include file="Public/sidebar"/>
    <div class="main-content">
        <div class="main-content-inner">
            <!-- #section:basics/content.breadcrumbs -->
            <include file="Public/breadcrumbs"/>

            <!-- /section:basics/content.breadcrumbs -->
            <div class="page-content">
                <include file="Public/set"/>

                <!-- /section:settings.box -->
                <div class="row">
                    <div class="col-xs-12">
                        <div class="space-4"></div>
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <img src="{$data.book.book_img}" style="max-width:50%" id="book-thumb">
                                            <h4>{$data.book.book_title}</h4>
                                            <div style="line-height: 1.7em;margin-top:10px;" class="text-muted">
                                                字数: {$data.book.booksize}<br>
                                            </div>
                                            <div class="text-muted" style="margin-top:10px;line-height: 1.7em;">
                                                {$data.book.description}
                                            </div>
                                        </div>
                                        <div class="col-sm-9">
                                            <ul class="list-group" style="margin-left:0">
                                                <volist name="data.chapter" id="vo">
                                                    <li class="list-group-item chapter-item">
                                                        <span style="display:inline-block;min-width:26px;">{$i}</span>
                                                        <a href="#"  class="chapter-title" data-id="{$vo.id}">{$vo.chapter_name}</a>
                                                        <span style="font-size:12px;margin-left:5px"><span style="color:forestgreen">免费</span></span>
                                                        <span class="pull-right">
                                                            <a title="" href="#"  class="ref-link" data-title="{$vo.chapter_name}" data-book="{$data.book.id}"  data-chapter="{$vo.id}">
                                                                <i class="fa fa-link"></i> 获取推广链接
                                                            </a>
                                                        </span>
                                                    </li>
                                                </volist>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>                          
                        </div>
                        <!-- PAGE CONTENT ENDS -->
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.page-content -->
        </div>
    </div><!-- /.main-content -->
    <include file="Public/footer"/>
</div><!-- /.main-container -->
<!-- 模态框（Modal）查看小说 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="modal-chapter-title"></h4>
            </div>
            <div class="modal-body" id="modal-chapter-content"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">我知道了</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div class="modal fade" id="create-referral-link-modal" tabindex="-1">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" aria-label="Close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="link-title"></h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" >

                    <div class="form-group">
                        <label class="control-label col-sm-3"><span class="required">*</span> 派单渠道名称</label>
                        <div class="col-sm-7">
                            <input type="hidden" name="bookid"/>
                            <input type="hidden" name="chapterid"/>
                            <input type="text" class="form-control" maxlength="100" name="description"/>
                            <p class="help-block help-block-error" data-valmsg-for="description" data-valmsg-replace="true"></p>
                        </div>
                    </div>


                    <div >
                        <div class="form-group">
                            <div class="col-sm-7 col-sm-offset-3">
                                <p class="form-control-static">
                                    <img style="width:80px" id="small-book-thumb"/>
                                </p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-3">阅读原文章节</label>
                            <div class="col-sm-7">
                                <p class="form-control-static">
                                    <strong id="small-chapter-name"></strong>
                                </p>
                            </div>
                        </div>
                        
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="btn-make">生成链接</button>
            </div>
        </div>
    </div>
</div>


<include file="Public/footerjs"/>
<script type="text/javascript" src="__PUBLIC__/static/js/admin.js"></script>
<script type="text/javascript">
    $(".chapter-title").on("click", function () {
        var id = $(this).attr("data-id");
        $.get("{:U('content')}", {id: id}, function (data) {
            if (data != 0) {
                $("#modal-chapter-title").text(data.chapter_name);
                $("#modal-chapter-content").html(data.content);
                $("#myModal").modal('show');
            }
        });
    })
    $(".ref-link").on("click", function () {
        $("#link-title").html("生成推广链接");
        $("#create-referral-link-modal").modal('show');
        $("#small-chapter-name").text($(this).attr("data-title"));
        $("#small-book-thumb").attr("src" , $("#book-thumb").attr("src"));
        $("input[name=bookid]").val($(this).attr("data-book"));
        $("input[name=chapterid]").val( $(this).attr("data-chapter"));
        
    })
    
    $("#btn-make").on("click" , function(){
        var description = $("input[name=description]").val();
        var bookid = $("input[name=bookid]").val();
        var chapterid = $("input[name=chapterid]").val();
        if(description.trim() == ''){
            layer.alert("请输入派单渠道名称");return false;
        }
        
        $.post("{:U('Referlink/create')}" ,{description:description,bookid:bookid,chapterid:chapterid} , function(data){
            if(data.status == 1){
                window.location.href = "{:U('Referlink/index')}"
            }
            layer.alert(data.msg);
        })
    })


</script>
</body>
</html>